<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>文件格式转换</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <!-- 桌面版布局 -->
    <div class="desktop-container">
        <header class="top-header">
            <div class="logo">
                <img src="#" alt="Logo">
                <span>01</span>
            </div>
            <div class="search-bar">
                <input type="text" placeholder="    ">
                <button class="search-btn">搜索</button>
            </div>
        </header>

        <div class="content-wrapper">
            <div class="sidebar">
                <div class="tool-group">
                    <div class="tool-header">
                        <span class="arrow">▼</span>
                        <span>PDF转换</span>
                    </div>
                    <ul class="tool-list">
                        <li class="tool-item active" data-mode="pdf2word">
                            <span class="tool-icon">W</span>
                            <span class="tool-name">PDF转Word</span>
                        </li>
                        <li class="tool-item" data-mode="word2pdf">
                            <span class="tool-icon">W</span>
                            <span class="tool-name">Word转PDF</span>
                        </li>
                    </ul>
                </div>
                
                <div class="tool-group">
                    <div class="tool-header">
                        <span class="arrow">▶</span>
                        <span>图片工具</span>
                    </div>
                    <ul class="tool-list" style="display: none;">
                        <li class="tool-item" data-mode="img2text">
                            <span class="tool-icon">T</span>
                            <span class="tool-name">图片转文字</span>
                        </li>
                        <li class="tool-item" data-mode="img2pdf">
                            <span class="tool-icon">P</span>
                            <span class="tool-name">图片转PDF</span>
                        </li>
                    </ul>
                </div>
                
                <div class="tool-group">
                    <div class="tool-header">
                        <span class="arrow">▶</span>
                        <span>文档工具</span>
                    </div>
                    <ul class="tool-list" style="display: none;">
                        <li class="tool-item" data-mode="merge_pdf">
                            <span class="tool-icon">M</span>
                            <span class="tool-name">合并PDF</span>
                        </li>
                        <li class="tool-item" data-mode="split_pdf">
                            <span class="tool-icon">S</span>
                            <span class="tool-name">拆分PDF</span>
                        </li>
                    </ul>
                </div>

                <div class="tool-group">
                    <div class="tool-header">
                        <span class="arrow">▶</span>
                        <span>点击进入小猫世界</span>
                    </div>
                </div>
            </div>

            <div class="main-content">
                <div class="conversion-area">
                    <div class="conversion-icon">
                        <img src="images/pdf-to-word-icon.png" alt="PDF转Word">
                    </div>
                    <h1 class="conversion-title">PDF转Word</h1>
                    <p class="conversion-desc">格式不变，可编辑，把PDF转换为Word文档</p>
                    
                    <div class="upload-area">
                        <div class="upload-box">
                            <button class="upload-btn">
                                <span class="upload-icon">↑</span>
                                上传文档
                            </button>
                            <p class="upload-tip">点击上传PDF文档或拖拽PDF文档至此，支持格式：.pdf</p>
                        </div>
                    </div>
                    
                    <div id="desktop-result"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 移动版布局 -->
    <div class="mobile-container">
        <h1 class="page-title">文件格式转换</h1>
        
        <div class="conversion-options">
            <div class="option-card">
                <div class="option-item" id="word2pdf">
                    <div class="option-icon doc-icon">DOC</div>
                    <div class="option-name">Word转PDF</div>
                </div>
                
                <div class="arrow-icon">⇄</div>
                
                <div class="option-item" id="pdf2word">
                    <div class="option-icon pdf-icon">PDF</div>
                    <div class="option-name">PDF转Word</div>
                </div>
            </div>
        </div>
        
        <div class="upload-section">
            <div class="doc-icon large-icon">DOC</div>
            <p class="format-support">支持.doc/.docx格式文件</p>
            <button class="choose-file-btn">选择文件</button>
            <p class="ios-tip">点击图片选择转换文件类型</p>
            <p class="ios-tip">路径在下载(download)\weixin(或者qq)</p>
        </div>
        
        <div class="history-section">
            <h2 class="section-title">转换历史</h2>
            <div id="historyList">
                <!-- 历史记录将在这里动态添加 -->
            </div>
        </div>
        
        <div class="tip-banner">
            <span class="tip-icon">💡</span>
            <span class="tip-text">欢迎</span>
        </div>
        
        <div class="bottom-nav">
            <div class="nav-item active">
                <div class="nav-icon home-icon"></div>
                <div class="nav-text">首页</div>
            </div>
            <div class="nav-item">
                <div class="nav-icon user-icon"></div>
                <div class="nav-text"></div>
            </div>
        </div>
    </div>

    <!-- 共用的文件输入 -->
    <input type="file" id="fileInput" accept=".doc,.docx,.pdf" style="display: none;">
    <div id="result"></div>
    <script src="/script.js"></script>
</body>
</html> 